<!doctype html>
<html>
	<head>
		<!--声明当前页码的编码集：charset=gbk,gb2312(中文编码),utf-8(国际编码)-->
		<meta http-equiv="content-Type" content="text/html;charset=utf-8">
		<!--当前页面的三要素-->
		<title>第十节：css语法基础</title>
		<meta name="keywords" content="关键词,关键词">
		<meta name="description" content="">

		<!--css,js-->
		<style type="text/css">
			*{margin:0;padding:0;}
			body{font-size:12px;font-family:"微软雅黑";color:#000;}
			/*youku start*/
			.youku{width:800px;height:400px;margin:30px auto;border:6px double #000;}
			.youku ul li{list-style:none;float:left;
			font-size:14px;padding:0px 10px;height:30px;line-height:30px;width:60px;text-align:center;}
			.youku ul .set{background:#06C;color:#fff;}
			.youku .show{width:800px;height:370px;display:none;}
			.youku .one{background:#FF0;display:block;}
			.clean{clear:both;}
			/*end youku*/
		</style>
	</head>
<body>
	<!--youku start-->
	<h1>第十节：css语法基础讲解</h1>
	<div class="youku">
		<ul>
			<li class="set">一</li>
			<li>二、三</li>
			<li>四、五</li>
			<li>六</li>
			<li>七</li>
			<li>八</li>
			<li>九</li>
			<li>十、十一</li>
		</ul>
		<div class="show" style="display:block;"><img src="images/10-1.png"/></div>
		<div class="show"><img src="images/10-2.png"/></div>
		<div class="show"><img src="images/10-3.png"/></div>
		<div class="show"><img src="images/10-4.png"/></div>
		<div class="show"><img src="images/10-5.png"/></div>
		<div class="show"><img src="images/10-6.png"/></div>
		<div class="show"><img src="images/10-7.png"/></div>
		<div class="show"><img src="images/10-8.png"/></div>
	</div>
	<!--end youku-->
<!--导入jquery的官方类库-->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
	$(function(){
		$(".youku").find("li").hover(function(){
			//当鼠标滑动到li上的时候，添加样式，再滑动到相邻元素时，把前一个去掉（互斥）
			$(this).addClass("set").siblings().removeClass("set");
			//获取当前滑动的li的索引（下标）
			var _index = $(this).index();
			//当鼠标滑动到li标签上的时候，先隐藏所有div，再根据对应的下标显示出相应下标的div
			$(".show").hide().eq(_index).show();
		});
	
	});
</script>

</body>
</html>